<template>
  <div>
    <div class="mask"></div>
    <div class="new_vs">
      <!--  -->
      <div class="title">
        <span>新建资料</span>
        <i class="el-icon-close" @click="closeIconCLick"></i>
      </div>
      <!--  -->
      <div class="xuhao">
        <el-input
          placeholder="请输入客进序号, 按下回车"
          v-model="kejinxuhao_inputValue"
          @input="xu_hao_inputEvent"
          @keypress.native.enter="onEnterPress"
        ></el-input>
      </div>
      <!-- 表格 -->
      <div class="input_table_container">
        <el-table
          id="codeTable"
          :data="tableData"
          style="width: 100%"
          :cell-style="{ padding: 0, height: '30px' }"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          highlight-current-row
        >
          <el-table-column prop="customerName" label="客户"> </el-table-column>
          <el-table-column prop="brandedName" label="品牌"> </el-table-column>
          <el-table-column prop="phone" label="主牌">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.mainSign"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="副牌">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.minorSign"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="合格证">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.certificate"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="领标">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.neck"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
          <!-- v-model.number="scope.row.onePrice"
                type="number" -->
          <el-table-column prop="phone" label="吊粒">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.stringSeal"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="包装袋">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.packingBag"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="提袋">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model.number="scope.row.totesBag"
                type="number"
                @blur="handleTableInputBlur(scope.row)"
                @keypress.native.enter="inpEnter"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮 -->
      <div class="bottom_btn_container">
        <el-button @click="closeIconCLick">取消</el-button>
        <el-button type="primary" @click="handleKeepBtnClick">保存</el-button>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
//
import {
  query_ke_hu_or_pin_pia_by_kejinxuaho_api,
  add_data_api
} from '../../../../request/client/ke_hu_fu_liao_request.js'
export default {
  name: 'client_accessories_detail',
  data() {
    return {
      tableData: [],
      kejinxuhao_inputValue: ''
    }
  },
  methods: {
    handleTableInputBlur() {},
    //
    closeIconCLick() {
      this.$emit('closeIconCLick')
    },
    //
    async onEnterPress() {
      const { data: res } = await query_ke_hu_or_pin_pia_by_kejinxuaho_api({
        inputSequence: this.kejinxuhao_inputValue
      })
      //   X21111100002
      console.log(res, 'kejinxuhao_inputValue')
      //   this.tableData = res.data
      const arr = []
      for (const item of res.data) {
        const itemOBj = {
          brandedName: item.brandedName,
          certificate: '',
          customerName: item.customerName,
          customerNo: item.customerNo,
          mainSign: '',
          minorSign: '',
          neck: '',
          packingBag: '',
          stringSeal: '',
          totesBag: '',
          inputSequence: this.kejinxuhao_inputValue
        }
        arr.push(itemOBj)
      }
      this.tableData = arr
      //   console.log(this.tableData, 'arr')
      // 拿到dom元素
      this.$nextTick(() => {
        // 获取表格容器的dom
        // let codeTable = document.getElementById('codeTable')
        let codeTable = document.getElementById('codeTable')
        // 在里面获取input
        // let inputs = codeTable.getElementsByTagName('input')
        let inputs = codeTable.getElementsByTagName('input')

        if (inputs.length) {
          inputs[0].focus()
          inputs[inputs.length - 1].onkeyup = (e) => {
            // inputs[inputs.length].onkeyup = (e) => {
            if (window.event.keyCode == 13) {
              // 调用继续录入
              // this.handleKeepBtnClick()
              // 清空这个事件
              inputs[inputs.length - 1].onkeyup = () => {}
            }
          }
        }
      })
    },
    // 客进序号输入框的值输入的时候，触发的函数(字母不能小写)
    xu_hao_inputEvent(val) {
      this.kejinxuhao_inputValue = val.toUpperCase()
    },
    // 表格中的input按下回车的时候，触发的函数
    inpEnter(e) {
      // X21120100001
      // console.log(e.target, 'inpEnter')
      // 获取表格容器的dom
      let codeTable = document.getElementById('codeTable')
      // 在里面获取input
      let inpList = codeTable.getElementsByTagName('input')
      // 解决dom获取不更新的问题
      setTimeout(() => {
        const inputArr = [...inpList] // 按下回车
        // console.log(inputArr)
        // console.log('开始执行')
        e.target.blur()
        let index = inputArr.indexOf(e.target)
        if (index != -1) {
          if (index != inputArr.length - 1) {
            inputArr[index + 1].focus()
          }
        }
      }, 300)
    },
    // 点击保存的时候，触发的函数
    async handleKeepBtnClick() {
      if (this.tableData.length === 0) {
        return this.$message.warning('请输入客进序号, 按下回车,再点击保存')
      }
      // 表格没有数据，不能发起ajax
      console.log(this.tableData, 'arr')
      const { data: res } = await add_data_api(this.tableData)
      console.log(res, 'add_data_api')
      if (res.code !== 200) return
      //   添加成功
      // do something
      this.$message.success('保存成功')
      //   关闭对话框，如果父组件在显示，就刷新，否则直接关闭对话框
      //   this.closeIconCLick()
      this.$emit('jian_ting_keepBtnEvent')
    }
  }
}
</script>

<style lang="less" scoped>
//输入框的样式
/deep/.cell {
  padding: 4px;
  box-sizing: border-box;
}
// input输入框的样式
/deep/.el-input {
  // 宽度生效
  //   表格的列长度改变的话，要来这里调输入框的样式（已经响应式，不用改了）
  width: 80%;
  height: 32px;
  margin-left: 20px;
  .el-input__inner {
    height: 32px;
  }
}

.title {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f8f8;
  padding: 20px;
  font-weight: 800;
}
.xuhao {
  margin: 20px;
  height: 80px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 400px;
    height: 32px;
    margin-left: 20px;
    .el-input__inner {
      height: 32px;
    }
  }
}
.input_table_container {
  margin: 20px;
}
.bottom_btn_container {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 20px;
  padding-right: 20px;
}
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs {
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-height: 800px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
</style>
